<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device,initial-scale=1">
    <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="reset.css" rel="stylesheet">
    <link href="icon.css" rel="stylesheet">
    <link href="payment.css" rel="stylesheet">
    <script src="payment.js"></script>
    <title>饿了么 在线支付</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>

<body>
    <div class="wrapper">
        <!--  header部分-->
        <header>
            <p>在线支付</p>
        </header>
        <!--  订单信息部分  -->
        <h3>订单信息：</h3>
        <div class="order-info">
            <p>
                <span id="businessName"></span>
                <i class="fa fa-caret-down" id="showBtn"></i>
            </p>
            <p>&#165;<span id="orderTotal"></span></p>
        </div>
        <!--    订单明细部分-->
        <ul class="order-detailed" id="detailedBox" style="font-size: 3.4vw">
            <!-- <li>
                <p>纯肉鲜肉(水饺） x 2</p>
                <p>&#165;15</p>
            </li> -->
        </ul>
        
        <!--    支付方式部分-->
        <ul class="payment-type">
            <li onclick="choosePayWay('alipay')">
                <img src="./img/alipay.png">
                <i style="display: block;" class="fa fa-check-circle alipay"></i>
            </li>
            <li onclick="choosePayWay('wechat')">
                <img src="./img/wechat.png">
                <i style="display: none;" class="fa fa-check-circle wechat"></i>
            </li>
        </ul>
        <div class="payment-button">
            <button style="font-size: 3.4vw" onclick="pay()">确认支付</button>
        </div>
        <!--    底部菜单部分-->
        <ul class="footer">
            <li onclick="location.href='index.html' ">
                <i class="fa fa-home"></i>
                <p>首页</p>
            </li>
            <li>
                <i class="fa fa-compass"></i>
                <p>消息</p>
            </li>
            <li onclick="location.href='orderList.html' ">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li>
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>
    </div>
</body>

<script>
    function getURLParameter(name) {
        // 获取 URL 中的查询字符串部分
        var urlParams = new URLSearchParams(window.location.search);
        // 返回指定参数的值
        return urlParams.get(name);
    }

    function getUserInfo() {
        // 从 cookie 中读取用户信息
        var userInfoString = $.cookie('userInfo');
        if (userInfoString) {
            return JSON.parse(userInfoString);
        } else {
            window.location.href = 'login.html';
        }
    }

    function getOrder(orderId) {
        $.ajax({
            url: 'http://127.0.0.1:8081/order/getOrderById?orderId=' + orderId,
            type: 'POST',
            contentType: 'application/json; charset=UTF-8', // 设置内容类型为 JSON
            success: function (res) {
                if (res.flag) {
                    console.log(res)
                    $("#businessName").text(res.data.shop.shopName);
                    $("#orderTotal").text(res.data.orderTotal)
                    var html = []
                    for (var i = 0; i < res.data.list.length; i++) {
                        html.push('<li>                       ')
                        html.push('	<p>'+res.data.list[i].food.foodName+' x '+ res.data.list[i].quantity+'</p>')
                        html.push('	<p>&#165;'+ res.data.list[i].totalPrice  +'</p>           ')
                        html.push('</li>                      ')
                    }
                    html.push('<div class="order-deliveryfee">')
                        html.push('    <p>配送费</p>')
                        html.push('    <p>&#165;<span>'+ res.data.deliveryPrice+'</span></p>')
                        html.push('</div>')
                    $("#detailedBox").html(html)
                } else {
                    alert(res.message)
                }
            },
            error: function (xhr, status, error) {
                alert('查询失败：' + xhr.statusText);
            }
        });
    }

    function choosePayWay (payWay) {
        if (payWay == 'alipay') {
            $('.payment-type i').css('display', 'none');
            $('.payment-type .alipay').css('display', 'block');
            return;
        }
        if (payWay == 'wechat') {
            $('.payment-type i').css('display', 'none');
            $('.payment-type .wechat').css('display', 'block');
            return;
        }
    }

    function pay() {
        $.ajax({
            url: 'http://127.0.0.1:8081/order/pay?orderId=' + getURLParameter('orderId'),
            type: 'POST',
            contentType: 'application/json; charset=UTF-8', // 设置内容类型为 JSON
            success: function (res) {
                if (res.flag) {
                    console.log(res)
                    window.location.href = 'orderList.html';
                } else {
                    alert(res.message)
                }
            },
            error: function (xhr, status, error) {
                alert('查询失败：' + xhr.statusText);
            }
        });
    }

    $(document).ready(function () {
        var orderId = getURLParameter('orderId');
        if (orderId == null || orderId == '') {
            alert('参数错误');
            return;
        }
        var userInfo = getUserInfo();
        console.log(userInfo);
        getOrder(orderId);
    });
</script>

</html>